<template>
  <div>
    <a
      href="https://h5.peopleapp.com/floodhelp/"
      style="color: #f5222d;margin-bottom: 10px;margin-top:5px;font-weight: 600;display: block;"
      >点击进入紧急救援通道</a
    >
    <van-search
      v-model="value"
      show-action
      placeholder="请输入搜索关键词"
      @cancel="() => (this.value = '')"
    />
    <van-index-bar :index-list="indexList" @select="select">
      <div
        v-for="(e1, i) in list.filter(
          e =>
            e.title.indexOf(value) > -1 ||
            JSON.stringify(e.items).indexOf(value) > -1
        )"
        :key="i"
      >
        <van-index-anchor :index="e1.key">{{ e1.title }}</van-index-anchor>
        <van-cell
          class="cell"
          @click="cellClick(item2)"
          v-for="(item2, index) in e1.items"
          :key="index"
          :title="item2.group"
          :label="`${item2.name}（${item2.phone}）`"
        />
      </div>
    </van-index-bar>
    <van-divider>@劉</van-divider>
  </div>
</template>

<script>
import { Dialog } from "vant";
export default {
  name: "hellow",
  data() {
    const list = [
      {
        title: "郑州",
        key: "Z",
        items: [
          {
            group: "郑州市红十字水上义务救援队",
            name: "牛振西",
            phone: 13938568990
          },
          {
            group: "郑州红十字蓝天应急救援队",
            name: "李志鹏",
            phone: 13838332525
          },
          {
            group: "河南省应急救援协会",
            name: "陈水全",
            phone: 13838336788
          },
          {
            group: "新郑市神鹰救援队",
            name: "吴国钦",
            phone: 13253381110
          },
          {
            group: "新郑市蓝天救援队",
            name: "秦军峰",
            phone: 13733199101
          }
        ]
      },
      {
        title: "开封",
        key: "K",
        items: [
          {
            group: "开封蓝天救援队",
            name: "张海祥",
            phone: 13837835001
          },
          {
            group: "开封市无线电协会应急通信大队",
            name: "康伟",
            phone: 18503781818
          },
          {
            group: "开封市红豹救援队",
            name: "柴倩倩",
            phone: 18803789668
          }
        ]
      },
      {
        title: "洛阳",
        key: "L",
        items: [
          {
            group: "洛阳市神龙水上义务搜救队",
            name: "杨红山",
            phone: 15670399937
          },
          {
            group: "洛阳市神鹰救援队",
            name: "张超伟",
            phone: 15538837110
          },
          {
            group: "洛阳市伊川县神鹰救援队",
            name: "梁绪伟",
            phone: 15036999699
          }
        ]
      },
      {
        title: "平顶山",
        key: "P",
        items: [
          {
            group: "平顶山市永安应急救援队",
            name: "杜全甫",
            phone: 13949469283
          },
          {
            group: "平顶山市救援协会郑县应急队",
            name: "何邵舟",
            phone: 13383999505
          },
          {
            group: "平顶山市义工联合蓝天救援队",
            name: "李伟峰",
            phone: 17335236002
          }
        ]
      },
      {
        title: "安阳",
        key: "A",
        items: [
          {
            group: "安阳市红旗渠应急救援中心",
            name: "杨永峰",
            phone: 18567769958
          },
          {
            group: "内黄县枣乡应急救援中心",
            name: "朱志刚",
            phone: 15890758666
          },
          {
            group: "林州市蓝天救援队",
            name: "杨志军",
            phone: 13603461315
          },
          {
            group: "滑县应急救援协会",
            name: "赵彦军",
            phone: 18637288000
          }
        ]
      },
      {
        title: "鹤壁",
        key: "H",
        items: [
          {
            group: "淇县斑马救援队",
            name: "韦玉其",
            phone: 17630396099
          },
          {
            group: "山城区无疆公益救援协会",
            name: "钱宏滔",
            phone: 17719900007
          }
        ]
      },
      {
        title: "新乡",
        key: "X",
        items: [
          {
            group: "新乡市斑马应急救援中心",
            name: "柴守勇",
            phone: 13333804449
          },
          {
            group: "退役军人应急救援中心",
            name: "刘海军",
            phone: 13525022282
          }
        ]
      },
      {
        title: "焦作",
        key: "J",
        items: [
          {
            group: "焦作市应急救援协会",
            name: "张昊",
            phone: 18623911479
          },
          {
            group: "焦作市口温县应急救援服务中心",
            name: "张彦兵",
            phone: 15036520006
          }
        ]
      },
      {
        title: "濮阳",
        key: "P",
        items: [
          {
            group: "濮阳市红十字救援队",
            name: "刘冠中",
            phone: 13839396699
          },
          {
            group: "濮阳市中安众联应急救援服务中",
            name: "徐兴斌",
            phone: 13030314598
          },
          {
            group: "濮阳市工程机械行业协会应急救",
            name: "丁建国",
            phone: 13503938576
          },
          {
            group: "清丰县“红十字”应急救援队",
            name: "朱志芳",
            phone: 13513935088
          }
        ]
      },
      {
        title: "许昌",
        key: "X",
        items: [
          {
            group: "许昌市应急救援协会",
            name: "高煜",
            phone: 13903990656
          },
          {
            group: "许昌市工程机械行业协会",
            name: "胡结实",
            phone: 15937455885
          },
          {
            group: "长葛市红十字志愿者协会",
            name: "胥忠义",
            phone: 13462165087
          },
          {
            group: "禹州市应急救援协会",
            name: "王俊峰",
            phone: 13937458259
          },
          {
            group: "许昌市魏都区蓝天救援队",
            name: "俎小娟",
            phone: 13849890188
          }
        ]
      },
      {
        title: "漯河",
        key: "L",
        items: [
          {
            group: "中青应急救援队",
            name: "信天游",
            phone: 18803950088
          },
          {
            group: "潺河水上船员志愿者协会",
            name: "张红锋",
            phone: 18939547555
          },
          {
            group: "潦河市无线电协会",
            name: "汪世奇",
            phone: 18639533339
          },
          {
            group: "潺河市业余无线电运动协会",
            name: "翟阳阳",
            phone: 13503952586
          },
          {
            group: "临颍蓝天救援队",
            name: "翟 勇 ",
            phone: 13603471997
          }
        ]
      },
      {
        title: "南阳",
        key: "N",
        items: [
          {
            group: "城区蓝天救援中心",
            name: "范海涛",
            phone: 15688112117
          },
          {
            group: "镇平县蓝天救援队",
            name: "张界",
            phone: 13937707520
          },
          {
            group: "桐柏蓝天救援队",
            name: "刘博",
            phone: 13598233396
          }
        ]
      },
      {
        title: "商丘",
        key: "S",
        items: [
          {
            group: "商丘市水上义务救援队",
            name: "黄伟",
            phone: 13700830066
          },
          {
            group: "商丘市蓝天救援队",
            name: "王勇",
            phone: 13837034774
          },
          {
            group: "商丘市汽车摩托车运动协会（越野e族）",
            name: "崔强",
            phone: 13837034774
          }
        ]
      },
      {
        title: "信阳",
        key: "X",
        items: [
          {
            group: "信阳市蓝天救援队",
            name: "喻忠强",
            phone: 13603761722
          },
          {
            group: "淮滨县蓝天救援队",
            name: "喻勇",
            phone: 13803765810
          },
          {
            group: "潢川县蓝天救援队",
            name: "陈俊",
            phone: 15637661000
          },
          {
            group: "固始蓝天救援队",
            name: "陶明洋",
            phone: 18348477555
          },
          {
            group: "固始神州救援队",
            name: "任光磊",
            phone: 15537652283
          }
        ]
      },
      {
        title: "周口",
        key: "Z",
        items: [
          {
            group: "周口蓝天救援队",
            name: "朱健康",
            phone: 13838668228
          },
          {
            group: "项城应急蓝天救援队",
            name: "张海广",
            phone: 17633979958
          },
          {
            group: "项城水上义务救援队",
            name: "李建国",
            phone: 13938060537
          },
          {
            group: "鹿邑神鹰救援队",
            name: "张正江",
            phone: 13460020166
          },
          {
            group: "周口川汇蓝天救援队",
            name: "孟坤",
            phone: 15346090666
          }
        ]
      },
      {
        title: "驻马店",
        key: "Z",
        items: [
          {
            group: "驻马店市红十字蛟龙水上应急搜救队",
            name: "赵亚洲",
            phone: 13598903988
          },
          {
            group: "驻马店市蓝天救援队",
            name: "李振",
            phone: 17339671661
          },
          {
            group: "驻马店市红十字会山地救援队",
            name: "段国富",
            phone: 15036911069
          },
          {
            group: "泌阳县红十字蛟龙应急救援队",
            name: "平恩东",
            phone: 17633893777
          },
          {
            group: "泌阳县蓝天救援队",
            name: "王建磊",
            phone: 13097097888
          },
          {
            group: "西平县至善公益志愿者协会蛟龙",
            name: "耿广德",
            phone: 15893908715
          },
          {
            group: "汝南县小字蛟龙义务救援志愿服务组",
            name: "耿广德",
            phone: 15893908715
          },
          {
            group: "上蔡蓝天救援队",
            name: "宋卜",
            phone: 13949564518
          }
        ]
      },
      {
        title: "济源师范区",
        key: "J",
        items: [
          {
            group: "济源市红十字应急救援队",
            name: "关永科",
            phone: 13303910588
          },
          {
            group: "济源市应急救援协会",
            name: "吕涛",
            phone: 18790020089
          }
        ]
      }
    ];

    return {
      value: "",
      indexList: list.map((e, index) => e.title),
      list: list.map(e => {
        e.title = e.title + `（${e.items.length}支）`;
        return e;
      })
    };
  },
  methods: {
    select(ev) {
      console.log("ev", ev);
    },
    cellClick(e) {
      console.log("e", e);
      const a = document.createElement("a");
      a.href = "tel:" + e.phone;
      a.click();
    }
  },
  mounted() {
    if (!localStorage.getItem("flag")) {
      this.$dialog.alert({
        message:
          "搜索框 可以搜索救援队伍名称、姓名、市区、电话等。 列表点击即可拨打电话",
        closeOnClickOverlay: false,
        confirmButtonText: "我知道了"
      });
      localStorage.setItem("flag", "加油");
    }
  }
};
</script>

<style scoped>
.cell {
  transition: #f7f7f7 0.3s;
}
.cell:active {
  background-color: #f0f0f0;
}
</style>
